<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传测试</title>
    <style type="text/css">
        #imgPreview {
            width: 40%;
            height: 180px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }

        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }

        #imgSpan {
            position: absolute;
            top: 60px;
            left: 40px;
        }

        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
<div id="imgPreview">
    <div id="prompt3">
 <span id="imgSpan">
 点击上传
 <br/>
 <i class="aui-iconfont aui-icon-plus"></i>
     <!--AUI框架中的图标-->
 </span>
<!--        <input type="file" id="file" class="filepath" onchange="changepic(this)"-->
<!--               accept="image/jpg,image/jpeg,image/png,image/PNG">-->
<!--        &lt;!&ndash;当vaule值改变时执行changepic函数，规定上传的文件只能是图片&ndash;&gt;-->

        <input type="file" class="file" name="file" multiple="multiple" />

    </div>
    <img src="#" id="img3"/>
</div>

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script type="text/javascript">
    function changepic() {
        //$("#prompt3").css("display", "none");
        var reads = new FileReader();
        f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        console.log(getBase64Image(f))
        reads.onload = function (e) {
            document.getElementById('img3').src = this.result;
            //$("#img3").css("display", "block");
        };
    }

    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var dataURL = canvas.toDataURL("image/png");
        return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
    }

    // document.querySelector('.file').addEventListener('change', function(e) {
    //     //1.可以通过this拿到这个file的DOM元素
    //     console.log(this)
    //     //1.  e 函数事件参数对象中也有这个file的DOM元素对象。使用e.target也可以直接拿到
    //     console.log(e.target)
    //     //对开发人员屏蔽，所以直接 必须调用这个文件的DOM对象的files属性，返回一个数组
    //     let files = e.target.files
    //     console.log(files)
    //     // console.log(files.item(0))
    //     // console.log(files[0])
    //     // 判断一手是否有文件
    //     if (!files.length) return
    //     // 上传文件 创建FormData
    //     let formData = new FormData()
    //     // upFile就是后台接收的key
    //     formData.append('upFile', files[0], files[0].name)
    //     // 将formdata发送到后台即可
    //     // 我用的 axios.post('url', formData)
    // })

    document.querySelector('.file').addEventListener('change', function(e) {
        let files = e.target.files
        if (!files.length) return
        // 上传文件 创建FormData
        let formData = new FormData()
        // 遍历FileList对象，拿到多个图片对象
        for (let i = 0; i < files.length; i++) {
            // formData中的append方法 如果已有相同的键，则会追加成为一个数组  注意:这里需要使用formData.getAll()获取
            formData.append('upFile', files[i], files[i].name)
        }
        console.log(formData)
        // 将formdata发送到后台即可
        // 我用的 axios.post('url', formData)
        for (let i = 0; i < files.length; i++) {

            var res = axios.post('http://localhost:9060/uploadfile',formData[i]);
            console.log(res)
        }
    })

</script>
</body>
</html>